<!DOCTYPE html>
<html>
<head>
    <title>绘制轨迹</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="./css/smoothness/jquery-ui-1.9.1.custom.min.css" type="text/css">
	<script type="text/javascript" src="../js/lib/JQuery/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="../js/lib/JQuery/jquery-ui-1.9.1.custom.min.js"></script>
    <script src="../js/lib/OpenLayers-2.11/OpenLayers.js"></script>
	<script type="text/javascript" src="../js/lib/OpenLayers-2.11/lib/OpenLayers/Layer/GoogleTile.js"></script>
	<style>
		#drag-tool-div{
			cursor: move;
			background-color:transparent;
		}
		#drag-tool-div table .bottom{
			margin-top:-1px;
			height: 1px;
			background-image: url("../images/custom/window/top-bottom.png");
			background-repeat: repeat-x;
		}
		#drag-tool-div table .center{
			background-position :top;
			background-image: url("../images/custom/window/top-bottom.png");
			background-repeat: repeat-x;
		}
		
		#drag-tool-div table .left{
			width : 6px;
			background-image: url("../images/custom/window/left-corners.png");
		}
		
		#drag-tool-div table .right{
			width : 6px;
			background-image: url("../images/custom/window/right-corners.png");
		}
	</style>
    <script type="text/javascript">
    	var lineLayer,drawControls;
        var proj = 'EPSG:26915';
        var lodLength = 20;
        var resolutions = [];
        var resolution = 156543.033928;
        for (var i = 0; i < lodLength; i++) {
            resolutions.push(resolution);
            resolution /= 2;
        }
        var tileSize = new OpenLayers.Size(256, 256);
        var agsTileOrigin = new OpenLayers.LonLat(-20037508.342787, 20037508.342787);
        var mapExtent = new OpenLayers.Bounds(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787);

        var map;
        function init() {
         format = 'image/png';
            map = new OpenLayers.Map('map', {
                maxExtent: mapExtent,
			    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                controls: [
		            new OpenLayers.Control.Navigation(),
		            new OpenLayers.Control.LayerSwitcher(),
		            new OpenLayers.Control.PanZoomBar(),
		            new OpenLayers.Control.MousePosition()
				]
            });
            var baseLayer = new OpenLayers.Layer.GoogleTile('google 影像地图',
				'http://mt0.google.cn/vt/lyrs=s@118&hl=zh-CN&gl=CN&src=app&x=${x}&y=${y}&z=${z}&s=Galile',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
            });
            
			
			var Layer = new OpenLayers.Layer.GoogleTile('google 矢量地图',
				'http://mt1.google.cn/vt/lyrs=m@189000000&hl=zh-CN&gl=CN&src=app&x=${x}&s=&y=${y}&z=${z}&s=Ga',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
            });
			
			
            

			 var styles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    pointRadius: 5,
                                    graphicName: "square",
                                    fillColor: "white",
                                    fillOpacity: 0.25,
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    strokeColor: "#3333aa"
                                },
                                "Line": {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: "#6666aa"
                                },
                                "Polygon": {
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    fillColor: "#9999aa",
                                    strokeColor: "#6666aa"
                                }
                            }
                        })
                    ]
                }),
                "select": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    pointRadius: 5,
                                    graphicName: "square",
                                    fillColor: "white",
                                    fillOpacity: 0.25,
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    strokeColor: "#0000ff"
                                },
                                "Line": {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: "#0000ff"
                                },
                                "Polygon": {
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    fillColor: "#0000ff",
                                    strokeColor: "#0000ff"
                                }
                            }
                        })
                    ]
                }),
                "temporary": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    graphicName: "square",
                                    pointRadius: 5,
                                    fillColor: "white",
                                    fillOpacity: 0.25,
                                    strokeWidth: 2,
                                    strokeColor: "#0000ff"
                                },
                                "Line": {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: "#0000ff"
                                },
                                "Polygon": {
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    strokeColor: "#0000ff",
                                    fillColor: "#0000ff"
                                }
                            }
                        })
                    ]
                })
            });
			lineLayer = new OpenLayers.Layer.Vector("lines", {
                styleMap: styles
            });
            drawControls = {
                    line: new OpenLayers.Control.DrawFeature(lineLayer,
                        OpenLayers.Handler.Path)
            };
            
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
            
            
            
            map.addLayers([Layer,baseLayer,lineLayer]);
			var center=new OpenLayers.LonLat(103.222595,35.70737).transform(map.displayProjection,map.getProjectionObject());
			map.setCenter(center, 4);  //添加平移缩放工具条
			
			
            
        }

 
    </script>
</head>
<body onload="init()">
    <div id="map" style="width: 100%; height: 500px;border :1px solid gray;">
    	
    </div>
    <div id="drag-tool-div"  style="background-color: transparent;width:200px;height:35px;z-Index:999999;">
    	<table width="100%" height="100%" cellpadding=0 cellspacing=0>
    		<tr>
    			<td class="left"></td>
    			<td class="center"><div>2</div></td>
    			<td class="right"></td>
    		</tr>
    		<tr class="bottom">
    			<td colspan="3"></td>
    		</tr>
    	</table>
    		<!-- 
    		<input class="dray-line" type="button" value="绘制线">
    		<input class="line-save" type="button" value="保存">
    		-->
    </div>
    <div id="draw">
     	<textarea id="text-points" rows="5" cols="40"></textarea>
     	<input class="draw-line" type="button" value="画线">
    </div>
   	<div id="resizable" style="width:200px;height:100px;border:1px solid red;" class="ui-widget-content">
   	 <h3 class="ui-widget-header">Resizable</h3>
	</div>
</body>
<script>

	$(document).ready(function(){
		
		$("#drag-tool-div").draggable();
		$("#drag-tool-div").find(".dray-line").click(function(){
			var control = drawControls["line"].activate();
		}).end().find(".line-save").click(function(){
			    var features=lineLayer.features;
			     var Console=OpenLayers.Console;
               	for(var i=0;i<features.length;i++){
               		var feature=features[i];
               		 var gid=feature.fid;
               		 var points=features[i].geometry.transform(map.getProjectionObject(),map.displayProjection);
               		  var pointstr=points.toString();
               		 alert(points);
               		 //Console.info(points);
               	}
		});
		
		var array;
		$("#draw").find('.draw-line').click(function(){
			array=[];
			var pointstr=$("#text-points").val().split(",");
			for(var i=0;i<pointstr.length;i++){
				var lonlatstr=pointstr[i];
				var lonlat = new OpenLayers.LonLat(lonlatstr.split(" ")[0], lonlatstr.split(" ")[1]);
				lonlat=lonlat.transform(map.displayProjection,map.getProjectionObject());
				var point =new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
				array.push(point);
			}
			var style_green = {
                strokeColor: "#339933",
                strokeOpacity: 1,
                strokeWidth: 3,
                pointRadius: 6,
                pointerEvents: "visiblePainted"
            };
			
			/*绘制线路*/
			var lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(array),null,style_green);
            lineLayer.addFeatures([lineFeature]);

			
		});
		
	});
</script>
</html>
